<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link type="text/css" rel="stylesheet" href="${ctx}/css/unified/unified_login.css">
    <link type="text/css" rel="stylesheet" href="${ctx}/css/unified/mobile-unified_admin_login.css" media="screen and (max-width: 960px)">
    <style type="text/css">
        .form{background-color:#404040;}
        .form-grp{background-color:#3a3a3a;}
        #embed-captcha{height:210px;}
        #embed-captcha .gt_holder{margin:30px 85px;}
        .float_geetest { display: inline-block;  margin-left: 40px;  margin-top: 20px;}
    </style>
</head>
<body>
<div class="page">
    <div class="left">
        <div class="left-center">
            <div class="img left_img"></div>
            <p class="left_p">智合数据，以“数据驱动企业发展”为自身使命，致力为全国大中型企业提供一站式产品解决方案。</p>
        </div>

    </div>
    <div class="right">
        <!--错误提示背景色红-->
        <c:if test="${!empty error}">
            <p class="error-msg-alt">${error}</p>
        </c:if>

        <!--主要内容-->
        <form id="login-form" action="${ctx}/login" method="post">

            <div class="right-center login">
                <!--标题-->
                <p class="right-lr-title">
                    <span class="line"></span>
                    <%--<span class="title">运&nbsp;联&nbsp;传&nbsp;媒&nbsp;身&nbsp;份&nbsp;认&nbsp;证&nbsp;系&nbsp;统</span>--%>
                    <span class="title">智&nbsp;唐&nbsp;科&nbsp;技&nbsp;身&nbsp;份&nbsp;认&nbsp;证&nbsp;系&nbsp;统</span>
                    <span class="line"></span>
                </p>
                <div class="form-input-grp marginTop30">
                    <div class="error-out"><div class="error-msg hide"><span>密码长度不够！</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>
                    <div class="form-lr-icon l"><div class="img icon-img human"></div></div>
                    <input type="text" placeholder="手机号/邮箱" class="form-input form-input-l" id="phone-email" name="username">
                </div>
                <div class="form-input-grp">
                    <div class="error-out"><div class="error-msg hide"><span>密码长度不够！</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>
                    <div class="form-lr-icon l"><div class="img icon-img clock"></div></div>
                    <input type="password" placeholder="请输入密码" class="form-input form-input-l" id="pwd" name="password">
                </div>
                <%--<div class="form-input-grp">--%>
                    <%--<div class="error-out"><div class="error-msg hide"><span>验证码错误</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>--%>
                    <%--<div class="form-lr-icon l"><div class="img icon-img dun"></div></div>--%>
                    <%--<div class="form-lr-icon r"><span id="code" class="mycode"></span></div>--%>
                    <%--<input type="text" placeholder="请输入验证码" class="form-input form-input-l verifyCode" id="inputCode">--%>
                <%--</div>--%>
                <div class="float_geetest" id="float-captcha"></div>
                <p id="wait" class="show float_geetest">正在加载验证码......</p>
                <p id="notice" class="hide">请先拖动验证码到相应位置</p>

                <div class="login-operate marginTop15">
                    <div class="free-login" onclick="operate_ten(this);remember()"><span class="img icon-img"><i class="fa fa-check" ></i></span>&nbsp;&nbsp;十天内免登陆</div>
                    <div class="forget-pwd"><a href="${ctx}/user/find-password">忘记密码？</a> </div>
                </div>
                <!--登录按钮-->
                <div class="form-btn form-btn-u form-btn-o"  id="Login">登录&nbsp;&nbsp;<i class="fa fa-chevron-right"></i></div>
                <!--注册按钮-->
                <div class="form-btn form-btn-e form-btn-o marginTop25"><a href="${ctx}/register">30秒注册</a></div>
            </div>
        </form>

    </div>
</div>
</body>
<script type="text/javascript" src="${ctx}/js/libs/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/libs/js.KinerCode.js"></script>
<script type="text/javascript" src="${ctx}/js/common/validate.js"></script>
<script type="text/javascript" src="${ctx}/js/unified/unified_login.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script type="text/javascript" src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
    var handlerEmbed = function (captchaObj) {

            $("#Login").click(function (e) {
                var validate = captchaObj.getValidate();
                if (!validate) {
                    $("#notice")[0].className = "show";
                    setTimeout(function () {
                        $("#notice")[0].className = "hide";
                    }, 2000);
                    e.preventDefault();
                }

                console.log('login');
                var phone_email=$("#phone-email").val();
                var pwd=$("#pwd").val();
                if(!isEmpty(phone_email)){
                    $("#phone-email").parent().find(".error-msg").removeClass("hide");
                    $("#phone-email").addClass("error-bor");
                    $("#phone-email").parent().find("span").text("手机号/邮箱不能为空");
                    return false;
                }else{
                    $("#phone-email").parent().find(".error-msg").addClass("hide");
                    $("#phone-email").removeClass("error-bor");
                    if((!isPhoneNumber(phone_email)&&!isEmail(phone_email))){
                        $("#phone-email").parent().find(".error-msg").removeClass("hide");
                        $("#phone-email").addClass("error-bor");
                        $("#phone-email").parent().find("span").text("手机号/邮箱格式不正确");
                        return false;
                    }else{
                        $("#phone-email").parent().find(".error-msg").addClass("hide");
                        $("#phone-email").removeClass("error-bor");
                        if(!isEmpty(pwd)){
                            $("#pwd").parent().find(".error-msg").removeClass("hide");
                            $("#pwd").addClass("error-bor");
                            $("#pwd").parent().find("span").text("密码不能为空");
                            return false;
                        }else{
                            $("#pwd").parent().find(".error-msg").addClass("hide");
                            $("#pwd").removeClass("error-bor");
                            if(!isLessLength(pwd)){
                                $("#pwd").parent().find(".error-msg").removeClass("hide");
                                $("#pwd").parent().find("span").text("请输入6-16位密码");
                                return false
                            }else{
                                $("#pwd").parent().find(".error-msg").addClass("hide");
                                $("#pwd").removeClass("error-bor");
                                if(!$(".verifyCode").parent().hasClass("hide")){
                                    if($(".verifyCode").val()==""){
                                        document.getElementById("Login").setAttribute("onclick","");
                                        $(".verifyCode").parent().find(".error-msg").removeClass("hide");
                                        $(".verifyCode").addClass("error-bor");
                                        $(".verifyCode").parent().find(".error-msg").find("span").text("验证码不能为空");
                                        return false;
                                    }else{
                                        $(".verifyCode").parent().find(".error-msg").addClass("hide");
                                        $(".verifyCode").removeClass("error-bor");
                                    }
                                }
                            }
                        }

                    }
                }

                $('#login-form').submit();
            });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#float-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };

    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "/initcaptcha?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            var dataObj=eval("("+data+")");
            initGeetest({
                gt: dataObj.gt,
                challenge: dataObj.challenge,
                product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !dataObj.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
    var flag="0";
    function remember(){
        if(flag=="1"){
            flag = "0";
            document.getElementById("rememberme").value=flag;
            return;
        }
        if(flag=="0"){
            flag = "1";
            document.getElementById("rememberme").value=flag;
            return;
        }
    }
</script>
</html>

